<template>
  <div>
    <h2>当前求和为：{{result}}</h2>
    <h3>当前求和访达10倍为：{{resultTen}}</h3>
    <h3>我在{{school}}学习{{session}}</h3>
    <h4 style="color:red">【实现数据共享】下方组件的总人数是：{{personList.length}}</h4>
    <select name="" id="" v-model.number="number">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="reduce">-</button>
    <button @click="jiAdd">当前求和为奇数再加</button>
    <button @click="waitAdd">等1秒再加</button>
  </div>
</template>

<script>
    import {mapGetters, mapState} from 'vuex'
    export default {
        name:'count',
        data() {
            return {
                number:0,
            }
        },
        methods: {
            add() {
                // this.$store.dispatch('jia',this.number)
                this.$store.commit('ADD',this.number)
            },



            // ************************************************
            reduce() {
                this.$store.dispatch('jian',this.number)
            },
            jiAdd() {
                this.$store.dispatch('jiaOdd',this.number)
            },
            waitAdd() {
                this.$store.dispatch('waitJia',this.number)
            }
        },
        computed: {
            // 第一种读取state值的方式
            result() {
                return this.$store.state.result;
            },
            // 读取getters中值的方式
            ...mapGetters(['resultTen']),
            // 第二种读取state值方式，
            ...mapState(['school', 'session', 'personList'])
        }
    }
</script>

<style scoped>
    button {
        margin: 0 4px;
    }
</style>